<template>
	<view>
		<view class="bottomBtn" @click="">
			<u-button type="primary" class="btn" @click="applyNowShow=true">立即申请</u-button>
			<!-- <u-button type="primary" class="btn" :disabled="disabled">{{disabled?'已申请':'立即申请'}}</u-button> -->
			<u-popup :show="applyNowShow" mode="bottom" @close="applyNowShow=false" @open="applyNowOpen" :round="24">
				<view>
					<text class="applyNowTitle">填写信息</text>
					<view style="margin: 0 32rpx;">
						<u--form labelPosition="left" :model="model" ref="form" labelWidth="140">
							<u-form-item label="是否服从岗位调剂" borderBottom>
								<view style="position: absolute;right: 0;">
									<u-radio-group v-model="model.userInfo.fcgwtj">
										<u-radio name="是" shape="circle" label="是" style="margin-right: 48rpx;">
										</u-radio>
										<u-radio name="否" shape="circle" label="否"></u-radio>
									</u-radio-group>
								</view>
							</u-form-item>
							<u-form-item label="个人简历" borderBottom @click="toPage('myResume')">
								<view style="position: absolute;right: 0;">
									<text style="color: #999999;font-size: 28rpx;">请选择</text>
									<image src="../../static/images/right.png" alt=""
										style="width: 38rpx;height: 36rpx;vertical-align: middle;">
								</view>
							</u-form-item>
						</u--form>
						<view>
							<text style="margin: 24rpx 0;color: #303133;">空余时间设置</text>

							<view v-for="(item,i) in freeTimeList" :key="i">
								<view style="padding: 24rpx 0;">
									<text
										style="color: #333333;font-weight: 400;line-height: 40rpx;font-size: 28rpx;">{{item}}</text>
									<image @click="delTime(i)" src="../../static/images/garbage.png" alt=""
										style="position: absolute;right: 0;width: 38rpx;height: 36rpx;">
								</view>
							</view>
							<view @click="timeSelectShow=true" class="addBtn">
								<image src="../../static/images/addTime.png" alt="" />
								<text>添加时间</text>
							</view>
							<u-popup :show="timeSelectShow" :round="10" mode="bottom" @close="closeTimeSelectShow"
								@open="open">
								<view style="position: relative;">
									<view
										style="text-align: center;margin-top: 28rpx;margin-bottom: 28rpx;font-size: 28rpx;color: #333;">
										添加时间</view>
									<image src="../../static/images/close_icon.png"
										style="width: 26rpx;height: 26rpx;position: absolute;right: 32rpx;top: 34rpx;"
										@click="closeTimeSelectShow()">
									</image>
									<van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
										<template #content>
											<view v-if="active === 0" class="timeBox">
												<view class="timeItem" :class="item == time?'timeBlue':''"
													v-for="(item, i) in timeList" :key="i" @click="changeTime(item)">
													{{item.time}}
												</view>
											</view>
											<view v-else-if="active === 1">2222</view>
										</template>
									</van-tree-select>
								</view>
							</u-popup>
						</view>
						<u-button type="primary" @click="submit" style="background: #2674FF;margin: 42rpx 0 26rpx;border-radius: 8rpx;">立即提交</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="container">
			<!-- 顶部标题 -->
			<view class="topTitle">
				<image src="../../static/images/runningIcon.png" alt="" class="statusIcon">
					<!-- <image src="../../static/images/overIcon.png" alt="" class="statusIcon"> -->
					<view>
						<text class="subtitle">常规</text>
						<text class="maintitle">办事大厅助理</text>
					</view>
					<view class="department">
						<image src="../../static/images/served.png" alt="" class="served" />
						<view class="tag">
							<image src="../../static/images/flagIcon.png" alt="" class="flag">
								<text>2021常规用工</text>
						</view>
						<text class="departs">新媒体</text>
						<text class="departs">新媒体</text>
					</view>
					<view class="limit">
						<text>限<text style="color: #2674FF;">10</text>人｜教务处</text>
					</view>
			</view>
			<!-- 报名信息 -->
			<view class="signUp">
				<view class="signUpItem">
					<image src="../../static/images/calendarIcon.png" alt="" />
					<text>报名时间：2021.09.10-2022</text>
				</view>
				<view class="signUpItem">
					<image src="../../static/images/addressIcon.png" alt="" class="addressIcon" />
					<text>地址：学生活动中心一楼</text>
				</view>
				<view class="signUpLine"></view>
				<view class="signUpInfo">
					<image src="../../static/images/applyFail.png" class="avatar" />
					<text>杨兰｜宣传部</text>
				</view>
			</view>
			<!-- 岗位描述 -->
			<view class="description">
				<text class="descriptionTitle">岗位描述</text>
				<view class="descriptionDetail">
					<text>
						岗位职责：
						1、主要协助做好文件收发、会议通知、经费报销、家具设备、报刊整理、单干管理等办公室日常工作。
						2、有一定的计算机操作能力，熟练办公软件；
						3、为人热情开朗，态度积极；有茶饮品冲泡经验优先；
					</text>
					<text>
						岗位要求：
						1、有一定的计算机操作能力，熟练办公软件；
						2、为人热情开朗，态度积极；有茶饮品冲泡经验优先；
					</text>
				</view>
			</view>
			<!-- 应聘要求 -->
			<view class="description">
				<text class="descriptionTitle">应聘要求</text>
				<view class="descriptionDetail">
					<text style="color: #333;">
						周二上午、周三上午无课优先。
					</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyNowShow: false,
				model: {
					userInfo: {
						fcgwtj: 'uView UI',
						sex: '',
					},
				},
				timeSelectShow: false,
				timeList: [{
						time: '9:00-10:00',
					},
					{
						time: '10:00-11:00',
					},
					{
						time: '9:00-10:00',
					},
				],
				time: '',
				active: 0,
				items: [{
						text: '2月23日(星期三)'
					},
					{
						text: '2月24日(星期三)'
					},
					{
						text: '2月24日(星期三)'
					},
					{
						text: '2月24日(星期三)'
					},
					{
						text: '2月24日(星期三)'
					},
					{
						text: '2月24日(星期三)'
					},
				],
				freeTimeList: [],
			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			delTime(i) {
				this.freeTimeList.splice(i, 1)
			},
			changeTime(item) {
				this.time = item.time
				this.freeTimeList.push(this.items[this.active].text + ' ' + this.time)
				this.closeTimeSelectShow()
			},
			closeTimeSelectShow() {
				this.timeSelectShow = false
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fafafa;
	}

	.addBtn {
		display: flex;
		justify-content: center;
		margin: 24rpx 0;

		image {
			width: 42rpx;
			height: 40rpx;
			vertical-align: middle;
			margin-right: 14rpx;
		}

		text {

			font-size: 30rpx;
			color: #2674FF;
			font-weight: 400;
		}
	}

	// 底部按钮
	.bottomBtn {
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		display: block;
		position: fixed;
		bottom: 0;
		z-index: 2;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);

		.btn {
			width: 686rpx;
			height: 100rpx;
			background: #2674FF;
			border-radius: 8rpx;
			margin-top: 24rpx;
		}

		.applyNowTitle {
			display: flex;
			justify-content: center;
			margin: 40rpx 0 36rpx 0;
			line-height: 50rpx;
			color: #333333;
			font-weight: 500;
			font-size: 36rpx;
		}
	}

	.timeBox {
		display: flex;
		flex-wrap: wrap;
		margin: 18rpx 24rpx;

		.timeItem {
			padding: 34rpx 28rpx;
			flex: 0 0 calc(50% - 9rpx);
			font-size: 24rpx;
			border-radius: 8rpx;
			color: #666666;
			background: #F4F4F4;
			margin-bottom: 16rpx;
		}

		.timeItem:nth-child(odd) {
			margin-right: 9rpx;
		}

		.timeItem:nth-child(even) {
			margin-left: 9rpx;
		}

		.timeBlue {
			color: #2674FF;
			background: #E9F1FF;
		}

	}

	.van-tree-select__nav {
		flex: 1.25;
	}

	.van-sidebar-item--select::before {
		background-color: #2674FF;
	}

	.container {
		margin: 32rpx 32rpx 200rpx 32rpx;

		.topTitle {
			position: relative;

			.statusIcon {
				position: absolute;
				width: 160rpx;
				height: 52rpx;
				right: -32rpx;
			}

			.subtitle {
				font-size: 20rpx;
				color: #FFFFFF;
				border-radius: 16rpx 0px 16rpx 0px;
				background: #EF6850;
				padding: 2rpx 8rpx;
				margin-right: 8rpx;
			}

			.maintitle {
				font-size: 42rpx;
				font-weight: 500;
				color: #333333;
				line-height: 52rpx;
				letter-spacing: 1rpx;
			}

			.department {
				margin: 20rpx 0 18rpx 4rpx;

				.tag {
					padding: 6rpx 14rpx 4rpx 14rpx;
					margin-right: 8rpx;
					font-size: 24rpx;
					color: #FF8100;
					background: #FFEBD7;
					display: inline-block;

					.flag {
						width: 22rpx;
						height: 28rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}

				.served {
					width: 152rpx;
					height: 54rpx;
					margin-right: 8rpx;
					vertical-align: middle;
				}

				.departs {
					padding: 6rpx 14rpx;
					margin-right: 8rpx;
					font-size: 24rpx;
					color: #327BFF;
					border-radius: 4rpx;
					background: #E4EEFF;
				}
			}

			.limit {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.signUp {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 42rpx 24rpx 30rpx 24rpx;
			margin-top: 24rpx;

			.signUpInfo {
				margin-top: 26rpx;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 14rpx;
					vertical-align: middle;
				}

				text {
					font-size: 28rpx;
					line-height: 40rpx;
					color: #333333;
					font-weight: 400;
				}
			}

			.signUpLine {
				background: #EEEEEE;
				height: 1px;
			}

			.signUpItem {
				display: flex;
				margin-bottom: 22rpx;

				image {
					height: 30rpx;
					width: 32rpx;
					vertical-align: middle;
				}

				.addressIcon {
					width: 24rpx;
					margin-left: 4rpx;
					margin-right: 4rpx;
				}

				text {
					margin-left: 36rpx;
					color: #666666;
					font-size: 28rpx;
				}
			}
		}

		.description {
			.descriptionTitle {
				position: relative;
				left: 22rpx;
				margin-top: 40rpx;

				font-size: 34rpx;
				color: #333333;
			}

			.descriptionTitle:before {
				content: '';
				position: absolute;
				left: -22rpx;
				top: 4px;
				display: inline-block;
				width: 8rpx;
				height: 36rpx;
				background-color: #2674FF;
				border-radius: 12rpx;
			}

			.descriptionDetail {
				margin-top: 16rpx;
				line-height: 52rpx;
				font-weight: 400;
				border-radius: 16rpx;
				background-color: #fff;
				padding: 36rpx 18rpx;
				font-size: 28rpx;
				color: #666666;

				text:nth-child(2) {
					margin-top: 56rpx;
				}
			}
		}

	}
</style>
